<template>
  <div class="page">
    <h2><input v-model:value="journal.Title"
             :disabled="unEdit"
             placeholder="标题" /></h2>
    <div class="divider"></div>
    <textarea maxlength="5000"
              :disabled="unEdit"
              v-model:value="journal.Content"
              placeholder="内容">
    </textarea>
    <div class="btn">
      <button @click="operate"
              :class="'cu-btn cuIcon add-btn '+btnColor">
        <text :class="btnIcon"></text>
      </button>
    </div>

  </div>
</template>

<script>
import { j_GetContent, j_EditContent } from "@/utils/request.js"
export default {
  data () {
    return {
      jid: -1,
      unEdit: true,
      journal: [],
      btnColor: 'bg-gradual-blue',
      btnIcon: "cuIcon-write"
    }
  },
  methods: {
    operate: function () {
      this.unEdit = !this.unEdit
      if (this.unEdit) {
        this.btnColor = "bg-gradual-blue"
        this.btnIcon = "cuIcon-write"
        let rid = parseInt(uni.getStorageSync('rid'))
        let userId = uni.getStorageSync('userId')
        let data = JSON.stringify({ "jid": this.jid, "rid": rid, "userId": userId, "title": this.journal.Title, "content": this.journal.Content })
        j_EditContent(data).then(res => {
          console.log(res);
          let title = "添加成功"
          if (typeof res.data.data == "string") {
            title = "修改成功"
          }
          uni.showToast({
            title: title,
            icon: "none",
            duration: 2000
          });
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/journal/index?rid=' + rid.toString()
            });
          }, 2000);
        })
      } else {
        this.btnColor = "bg-gradual-red"
        this.btnIcon = "cuIcon-check"
      }
    }
  },
  onLoad (option) {
    this.jid = parseInt(option.jid)
    if (this.jid < 0) {
      this.unEdit = false
      this.btnColor = "bg-gradual-red"
    }
    let data = { "jid": this.jid }
    j_GetContent(data).then(res => {
      console.log(res);
      this.journal = res.data.data != null ? res.data.data : {}
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h2 {
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

textarea {
  font-size: 17px;
  text-decoration: underline;
  font-weight: 200;
  line-height: 150%;
  height: 500px;
  overflow: unset;
}

.btn {
  position: fixed;
  width: 60px;
  height: 60px;
  font-size: 60px;
  color: #a5e6bd;
  top: 81%;
  left: 77%;
  z-index: 9999;
}

.add-btn {
  font-size: 28px;
  width: 105rpx !important;
  height: 105rpx !important;
}

.divider {
  width: 70%;
  border: 0.5px solid #a5e6bd;
  margin-bottom: 10px;
}
</style>